<script setup>
import { ref, defineProps, defineEmits } from 'vue';
let props = defineProps(['isView']);
let emits = defineEmits(['close']);
let closeModal = () => {
    emits('close');
};
</script>

<template>
    <div v-if="isView" class="shadow">
        <div class="popup">
            <div class="close-icon">
                <h2>
                    <slot name="title"></slot>
                </h2>
                <span class="close" @click="closeModal()">&times;</span>
            </div>
            <form>
                <slot name="form"></slot>
                <slot name="button"></slot>
            </form>
        </div>
    </div>
</template>
  
<style>
.shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.popup {
    position: relative;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
    width: 60%;
    min-width: 300px;
    height: 300px;
}

.close {
    position: absolute;
    color: #aaaaaa;
    right: 20px;
    top: 5px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

form {
    max-width: 400px;
    height: 80%;
    max-height: 300px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.input {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input input {
    height: 100%;
    width: 70%;
    max-width: 200px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #767272;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}

.input select {
    width: 70%;
    max-width: 200px;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #767272;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    margin-left: 10px;
}

.close-icon {
    width: 100%;
    height: 50px;
}

.close-icon h2 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    outline: none;
    border: none;
    cursor: pointer;
    background-color: #fff;
    background-color: #5036f7;
    color: #fff;
    font-size: 18px;
    width: 100px;
    height: 40px;
    border-radius: 6px;
}
</style>
  